<template>
  <div class="my-box">
      <div>Porps子组件看到的操作：</div><div> ---  <span>{{props.name}}</span> --- prop省略输出的内容 <span>{{name}}</span></div>
  </div>
</template>
<script lang="ts" setup>
// import { defineProps } from 'vue'
// defineProps在<script setup> 中自动可用，无需导入


// 声明props
const props = defineProps({
    name :{
        type: String,
        default: ''
    }
})
</script>

<style scoped>
.my-box{
    display: flex;
}
  /* 支持CSS变量注入v-bind(color) */
</style>
